<template>
  <div class="chart">
    <!-- 1) 双大括号 -->
    {{msg}}
    <div>
      {{list}}
    </div>
    <div>
      <!-- 2) 列表渲染 -->
      <ul class="list">
        <li v-for="item in list" :key="item.id" @click="foo(item)">
          {{item.name}} 
        </li>
      </ul>
      <!-- 3) 事件机制 -->
      <a href="http://www.briup.com" @click.prevent="bar">杰普一下</a>
    </div>
    <!-- 条件渲染 -->
    <el-button-group >
      <el-button type="primary" size="small" @click="current = '现有确诊'">现有确诊</el-button>
      <el-button type="primary" size="small" @click="current = '累积确诊'">累积确诊</el-button>
    </el-button-group>
    <!--  -->
    <div v-if="current === '现有确诊'">现有确诊地图</div>
    <div v-else>累积确诊地图</div>

    <!-- 地图 -->
    <div id="map"></div>
  </div>
</template>
<script>
// vue模块化，表示对外暴露当前对象
export default {
  // 1. 数据
  data(){
    return {
      msg:"hello vue",
      list:[
        {id:1,name:"terry",age:3},
        {id:2,name:"tom",age:2},
        {id:3,name:"jacky",age:3},
        {id:4,name:"charles",age:2}
      ],
      current:"现有确诊"
    }
  },
  // 2. 方法
  methods:{
    foo(val){
      alert("this is "+val.name);
    },
    bar(){
      alert("this is bar");
    }
  },
  // 3. 生命周期
  // vue实例创建完毕
  created(){
    // 加载数据，并且将数据更新到data中的变量中
  },
  // 数据绑定之后 vue实例-> 虚拟dom -> 数据绑定 -> 渲染地图
  mounted(){
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
  }

}
</script>

<style scoped>
#map {
  height:400px;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list> li {
  line-height: 2em;
  background-color: rgb(237, 216, 100);
  color: #ffffff;
  padding: 0 .5em;
  border-bottom: 1px solid #ffffff;
}
</style>